import { StyleSheet, View, Image, Animated } from 'react-native'
import Price from '../price'
import { common } from '../../assets/style/common'
import { useEffect, useMemo, useRef, useState } from 'react'

export function TodayRecomment() {
  const goods = [
    {
      img: require('../../assets/coverImg/goods1.png'),
      price: '29.8',
      oldPrice: '36',
    },
    {
      img: require('../../assets/coverImg/goods2.png'),
      price: '298.8',
      oldPrice: '340',
    },
    {
      img: require('../../assets/coverImg/goods3.png'),
      price: '22.8',
      oldPrice: '28',
    },
    {
      img: require('../../assets/coverImg/goods4.png'),
      price: '32.8',
      oldPrice: '44',
    },
    {
      img: require('../../assets/coverImg/goods5.jpg'),
      price: '322.8',
      oldPrice: '344',
    },
    {
      img: require('../../assets/coverImg/goods6.jpg'),
      price: '98',
      oldPrice: '230',
    },
    {
      img: require('../../assets/coverImg/goods7.jpg'),
      price: '688.8',
      oldPrice: '740',
    },
  ]

  const [key, setKey] = useState(0)
  const [index, setIndex] = useState(0)
  const keys = useMemo(() => {
    const arr: any[] = []
    let lng = goods.length
    let first = index % lng // 0:0 1:1 2:2 3:3 4:0
    arr.push(first)
    arr.push(lng - first !== 1 ? ++first : (first = 0))
    return arr
  }, [key, index])
  const antiKeys = useMemo(() => {
    const arr: any[] = []
    let lng = goods.length
    let first = (index + 2) % lng // 0:0 1:1 2:2 3:3 4:0
    arr.push(first)
    arr.push(lng - first !== 1 ? ++first : (first = 0))
    return arr
  }, [key, index])
  const opacity = useRef(new Animated.Value(0)).current
  const antiOpaicty = opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  })
  useEffect(() => {
    const time = setTimeout(() => {
      const newKey = key === 1 ? 0 : 1
      Animated.timing(opacity, {
        toValue: newKey,
        useNativeDriver: true,
        duration: 300,
      }).start(() => {
        setKey(newKey)
        setIndex(val => val + 2)
      })
    }, 1700)
    return () => {
      clearTimeout(time)
    }
  }, [key])
  return (
    <View style={[common.flexCol]}>
      <View style={styles.menuItemCol}>
        <Animated.View
          style={[
            styles.animatedWrap,
            {
              opacity: opacity,
            },
          ]}
        >
          <ImgGoods {...goods[key === 0 ? antiKeys[0] : keys[0]]} />
        </Animated.View>
        <Animated.View
          style={[
            styles.animatedWrap,
            {
              opacity: antiOpaicty,
            },
          ]}
        >
          <ImgGoods {...goods[key === 1 ? antiKeys[0] : keys[0]]} />
        </Animated.View>
      </View>
      <View style={styles.menuItemCol}>
        <Animated.View
          style={[
            styles.animatedWrap,
            {
              opacity: opacity,
            },
          ]}
        >
          <ImgGoods {...goods[key === 0 ? antiKeys[1] : keys[1]]} />
        </Animated.View>
        <Animated.View
          style={[
            styles.animatedWrap,
            {
              opacity: antiOpaicty,
            },
          ]}
        >
          <ImgGoods {...goods[key === 1 ? antiKeys[1] : keys[1]]} />
        </Animated.View>
      </View>
    </View>
  )
}
function ImgGoods(props: any) {
  return (
    <>
      <Image style={styles.menuGd} source={props.img} />
      <View style={StyleSheet.compose(common.flexCol, styles.priceWrap)}>
        <Price
          style={styles.menuTJ}
          price={props.price}
          fontSize={10}
          color="#ffffff"
        />
        <Price
          price={props.oldPrice}
          fontSize={10}
          textDecorationLine="line-through"
          color="#999"
        />
      </View>
    </>
  )
}
export function ChildrenYongPing() {
  return (
    <View style={common.flexCol}>
      <View style={styles.menuItemCol}>
        <Image
          style={styles.menuGd}
          source={require('../../assets/coverImg/goods3.png')}
        />
        <Price
          style={styles.menuTJ2}
          price="42.0"
          fontSize={12}
          color="#ff2222"
        />
      </View>
      <View style={styles.menuItemCol}>
        <Image
          style={styles.menuGd}
          source={require('../../assets/coverImg/goods4.png')}
        />
        <Price
          style={styles.menuTJ2}
          price="59.9"
          fontSize={12}
          color="#ff2222"
        />
      </View>
    </View>
  )
}
const styles = StyleSheet.create({
  menuItemCol: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
    display: 'flex',
    position: 'relative',
  },
  menuGd: {
    height: 60,
    width: 80,
    resizeMode: 'contain',
  },
  menuTJ: {
    backgroundColor: '#ff2222',
    height: 14,
    borderRadius: 7,
    paddingLeft: 2,
    paddingRight: 4,
    marginRight: 4,
    verticalAlign: 'middle',
    textAlignVertical: 'center',
  },
  menuTJ2: {
    marginTop: 8,
    textAlign: 'center',
  },
  animatedWrap: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
    display: 'flex',
  },
  priceWrap: {
    marginTop: 12,
    justifyContent: 'center',
  },
})
